<template>
  <div class="module_item">
    <div class="header">
      <header>{{ moduleName }}</header>
      <div v-if="rightShow" class="rate">
        <div class="yearRate">同比：+15%</div>
        <div class="circleRate">环比：-15%</div>
      </div>
      <template v-else>
        <slot name="headerRight"></slot>
      </template>
    </div>
    <div class="data_show">
      <template v-if="dataType === 'one'">
        <div
          :class="dataIsOdd === 'odd' ? 'data_item odd' : 'data_item even'"
          v-for="(item, index) in dataListOne"
          :key="index"
        >
          <p>{{ item.data }}</p>
          <p>{{ item.desc }}</p>
        </div>
      </template>
      <template v-else-if="dataType === 'two'">
        <div class="inside_province province_common">
          <p>省内：（套）</p>
          <p>82739</p>
          <div class="yearRate">同比：+15%</div>
          <div class="circleRate">环比：-15%</div>
        </div>
        <div class="outside_province province_common">
          <p>省外：（套）</p>
          <p>82739</p>
          <div class="yearRate">同比：+15%</div>
          <div class="circleRate">环比：-15%</div>
        </div>
      </template>
    </div>
    <div v-if="chartShow" class="chart" style="height: 200px; background: #fff">
      <kt-chart :options="chartOption"> </kt-chart>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moduleName: {
      type: String,
      default: "模块名称",
    },
    chartShow: {
      type: Boolean,
      default: true,
    },
    rightShow: {
      type: Boolean,
      default: true,
    },
    dataType: {
      type: String,
      default: "one",
    },
    dataListOne: {
      type: Array,
      default: () => [],
    },
    chartOption: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    // 判断数据数组长度的奇偶性
    dataIsOdd() {
      return this.dataListOne.length % 2 == 0 ? "odd" : "even";
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
@import "../common/styles.scss";
.module_item {
  background: #fff;
  overflow: hidden;
  font-size: 14px;
  margin: 24px 0;
  border-radius: 15px;
  .header {
    @include fl(row, space-between);
    color: #333333;
    margin: 15px 0;
    padding-right: 10px;
    header {
      position: relative;
      padding-left: 10px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 100%;
        background: #1790fd;
      }
    }
    .rate {
      font-size: 12px;
      color: #fff;
      @include fl();
    }
  }
  .yearRate {
    width: 76px;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: #1790fd;
  }
  .circleRate {
    width: 76px;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: #ff5436;
    margin-left: 5px;
  }
  .data_show {
    @include fl();
    flex-wrap: wrap;
    .data_item {
      margin: 15px 0;
      p {
        margin: 10px 0;
        &:first-child {
          @include fc(32px, #1790fd);
        }
        &:last-child {
          @include fc(13px, #8d8d8d);
        }
      }
    }
    .odd {
      width: 50%;
      text-align: center;
    }
    .even {
      width: 50%;
      text-align: center;
      &:last-child {
        width: 100%;
      }
    }
    .province_common {
      width: 50%;
      @include fc(12px, #fff);
      @include fl(column);
      p {
        &:first-child {
          margin-left: -40px;
          @include fc(14px, #8d8d8d);
        }
        &:nth-child(2) {
          @include fc(37px, #1790fd);
          margin: 15px 0;
        }
      }
      .circleRate {
        margin-left: 0;
        margin: 10px 0;
      }
    }
  }
  .chart {
    margin: 10px;
    box-sizing: border-box;
    // padding: 10px;
  }
}
</style>
